<template>
  <el-input-number
    ref="inputNumberRef"
    v-bind="$attrs"
    @change="(currentValue, oldValue) => emit('change', currentValue, oldValue)"
    @blur="emit('blur')"
    @focus="emit('focus')"
  >
    <template
      v-for="item in $attrs.slots"
      #[item.name]="scopedData"
      :key="item.name"
    >
      <component :is="item.content" v-bind="scopedData" />
    </template>
  </el-input-number>
</template>

<script setup>
const emit = defineEmits(['change', 'blur', 'focus'])

const inputNumberRef = ref(null)

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return inputNumberRef.value?.[key]
      },
      has(target, key) {
        return key in inputNumberRef.value
      },
    },
  ),
)
</script>
